import React, { memo } from 'react';
import { ExternalLink } from 'lucide-react';

const HotspotCard = memo(({ hotspot }) => {
  const {
    id = 'default-id',
    title = '默认标题',
    url = '',
    platform = '未知平台',
    heat = 0,
    views = 0,
    comments = 0,
    rank = 0
  } = hotspot || {};

  // 格式化数字
  const formatNumber = (num) => {
    if (num >= 10000) return (num / 10000).toFixed(1) + '万';
    return num.toString();
  };

  // 热度颜色
  const getHeatColor = (heat) => {
    if (heat >= 90) return 'text-red-600 font-bold';
    if (heat >= 70) return 'text-orange-600 font-bold';
    if (heat >= 50) return 'text-yellow-600';
    return 'text-gray-600';
  };

  // 热度图标
  const getHeatIcon = (heat) => {
    if (heat >= 90) return '🔥';
    if (heat >= 70) return '⭐';
    if (heat >= 50) return '✨';
    return '';
  };

  // 标题点击跳转
  const handleTitleClick = () => {
    if (url?.startsWith('http')) {
      window.open(url, '_blank', 'noopener,noreferrer');
    }
  };

  // 按钮跳转
  const handleButtonJump = () => {
    if (url?.startsWith('http')) {
      window.open(url, '_blank', 'noopener,noreferrer');
    } else {
      alert(`"${title}" 无有效链接`);
    }
  };
  
  // 生成话题标签
  const generateTopicTags = (title, rank) => {
    const tags = [];
    
    // 根据排名添加标签
    if (rank <= 3) tags.push('爆热');
    else if (rank <= 10) tags.push('热门');
    else tags.push('上升');
    
    // 根据标题内容添加标签
    if (title.includes('明星') || title.includes('娱乐') || title.includes('演员')) {
      tags.push('娱乐');
    } else if (title.includes('科技') || title.includes('AI') || title.includes('技术')) {
      tags.push('科技');
    } else if (title.includes('体育') || title.includes('比赛') || title.includes('运动')) {
      tags.push('体育');
    } else if (title.includes('政策') || title.includes('国家') || title.includes('政府')) {
      tags.push('时政');
    } else if (title.includes('经济') || title.includes('股市') || title.includes('金融')) {
      tags.push('财经');
    } else {
      tags.push('社会');
    }
    
    return tags.slice(0, 3); // 最多3个标签
  };
  
  // 生成热搜摘要
  const generateHotspotSummary = (title, views, comments) => {
    const summaries = [
      `${title}引发网友热议，已获得${formatNumber(views)}次浏览，${formatNumber(comments)}条评论参与讨论。`,
      `该话题在社交媒体上迅速传播，浏览量达${formatNumber(views)}，评论区讨论激烈。`,
      `${title}成为网络焦点，吸引了${formatNumber(views)}人次关注，引发广泛讨论。`,
      `热门话题${title}持续发酵，已有${formatNumber(comments)}条评论，关注度不断上升。`
    ];
    
    return summaries[Math.floor(Math.random() * summaries.length)];
  };

  return (
    <div 
      className="group relative bg-gradient-to-br from-white/95 via-white/90 to-white/85 backdrop-blur-lg rounded-2xl p-4 border border-white/30 shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden mx-auto hover:scale-[1.01] hover:-translate-y-1" 
      style={{
        width: '75%', 
        minWidth: '500px',
        maxWidth: '1000px',
        margin: '0 auto', 
        display: 'block',
        boxSizing: 'border-box',
        padding: '1rem',
        position: 'relative',
        textAlign: 'left',
        background: 'linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.85) 100%)',
        backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
        border: '1px solid rgba(255,255,255,0.3)',
        boxShadow: '0 10px 25px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.4)'
      }}
    >
      {/* 增强背景装饰 */}
      <div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-br from-blue-200/40 to-purple-200/40 rounded-full blur-3xl transform translate-x-20 -translate-y-20 group-hover:scale-150 transition-all duration-1000"></div>
      <div className="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-br from-pink-200/30 to-orange-200/30 rounded-full blur-2xl transform -translate-x-16 translate-y-16 group-hover:scale-125 transition-all duration-1000"></div>
      <div className="absolute top-1/2 left-1/2 w-60 h-60 bg-gradient-to-br from-cyan-100/20 to-blue-100/20 rounded-full blur-3xl transform -translate-x-1/2 -translate-y-1/2 group-hover:rotate-180 transition-all duration-2000"></div>
      
      {/* 悬浮光效 */}
      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
      
      <div className="relative z-10">
        <div className="flex items-start space-x-4 w-full" style={{display: 'flex', alignItems: 'flex-start', width: '100%'}}>
          {/* 排名徽章 - 豪华版 */}
          <div className="relative flex-shrink-0">
            {/* 排名徽章主体 */}
            <div className={`relative w-20 h-20 rounded-3xl flex items-center justify-center text-white font-black text-3xl shadow-2xl transform group-hover:scale-125 group-hover:rotate-12 transition-all duration-500 ${
              rank === 1 ? 'bg-gradient-to-br from-red-500 via-pink-500 to-orange-500 shadow-red-300/60' :
              rank === 2 ? 'bg-gradient-to-br from-orange-500 via-yellow-400 to-amber-500 shadow-orange-300/60' :
              rank === 3 ? 'bg-gradient-to-br from-yellow-500 via-lime-400 to-green-500 shadow-yellow-300/60' : 
              rank <= 5 ? 'bg-gradient-to-br from-blue-500 via-indigo-500 to-purple-500 shadow-blue-300/60' :
              rank <= 10 ? 'bg-gradient-to-br from-purple-500 via-violet-500 to-indigo-500 shadow-purple-300/60' :
              'bg-gradient-to-br from-gray-500 via-slate-500 to-gray-600 shadow-gray-300/60'
            }`}>
              {/* 内部光效 */}
              <div className="absolute inset-1 rounded-2xl bg-gradient-to-br from-white/20 to-transparent"></div>
              <span className="relative z-10 drop-shadow-lg">{rank}</span>
            </div>
            
            {/* 排名装饰 */}
            {rank <= 3 && (
              <div className="absolute -top-2 -right-2 w-8 h-8 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center text-white text-lg animate-pulse">
                {rank === 1 ? '👑' : rank === 2 ? '🥈' : '🥉'}
              </div>
            )}
          </div>

          {/* 内容区域 */}
          <div className="flex-1 min-w-0 w-full" style={{flex: 1, minWidth: 0, width: '100%'}}>
            {/* 标题 - 豪华版 */}
            <div className="mb-4">
              <h3 
                className="font-black text-gray-800 text-xl md:text-2xl leading-tight mb-2 line-clamp-2 cursor-pointer hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-blue-600 hover:to-purple-600 transition-all duration-500 group-hover:scale-105 text-left w-full"
                onClick={handleTitleClick}
                title={url ? '点击跳转到原文' : '无链接'}
                style={{
                  width: '100%', 
                  textAlign: 'left',
                  textShadow: '0 2px 4px rgba(0,0,0,0.1)'
                }}
              >
                {title}
              </h3>
              
              {/* 标题下方装饰线 */}
              <div className="w-20 h-0.5 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full group-hover:w-24 transition-all duration-500"></div>
            </div>
            
            {/* 热搜详情预览 - 精简版本 */}
            <div className="mb-3 p-2 bg-gradient-to-br from-gray-50/80 to-white/60 backdrop-blur-sm rounded-lg border border-gray-200/50">
              <div className="flex items-center justify-between gap-4">
                {/* 左侧：趋势指标 */}
                <div className="flex items-center gap-2">
                  <span className="text-xs font-bold text-gray-700">📈</span>
                  <div className="flex items-end space-x-0.5 h-4">
                    {[...Array(6)].map((_, i) => {
                      const height = Math.max(20, heat - (i * 8) + Math.random() * 15);
                      return (
                        <div 
                          key={i}
                          className="w-1 bg-gradient-to-t from-blue-400 to-purple-500 rounded-t transition-all duration-500 hover:from-purple-400 hover:to-pink-500"
                          style={{ height: `${Math.min(height, 100)}%` }}
                        ></div>
                      );
                    })}
                  </div>
                  <span className="text-xs text-gray-600">上升</span>
                </div>
                
                {/* 右侧：关键标签 */}
                <div className="flex items-center gap-1">
                  {generateTopicTags(title, rank).slice(0, 2).map((tag, index) => (
                    <span 
                      key={index}
                      className={`px-2 py-0.5 text-xs font-semibold rounded-full transition-all duration-300 hover:scale-110 ${
                        index === 0 ? 'bg-gradient-to-r from-red-400 to-pink-400 text-white' :
                        'bg-gradient-to-r from-blue-400 to-cyan-400 text-white'
                      }`}
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            </div>

            {/* 数据指标 - 一行文字显示版本，统一左对齐 */}
            <div className="flex items-center gap-4 mb-4 w-full" style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-start', width: '100%'}}>
              <span className="flex items-center gap-1">
                <span className="text-gray-600 text-sm">热度</span>
                <span className={`font-bold text-sm ${
                  heat >= 90 ? 'text-red-600' :
                  heat >= 70 ? 'text-orange-600' :
                  heat >= 50 ? 'text-yellow-600' :
                  'text-gray-600'
                }`}>
                  {heat}°
                </span>
              </span>
              
              <span className="text-gray-300">|</span>
              
              <span className="flex items-center gap-1">
                <span className="text-gray-600 text-sm">浏览</span>
                <span className="font-bold text-sm text-blue-600">{formatNumber(views)}</span>
              </span>
              
              <span className="text-gray-300">|</span>
              
              <span className="flex items-center gap-1">
                <span className="text-gray-600 text-sm">评论</span>
                <span className="font-bold text-sm text-purple-600">{formatNumber(comments)}</span>
              </span>
            </div>

            {/* 底部操作栏 - 精简版 */}
            <div className="flex items-center justify-between w-full" style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%'}}>
              {/* 平台标签 - 精简版 */}
              <span className={`inline-flex items-center text-sm font-bold px-4 py-2 rounded-xl shadow-md backdrop-blur-sm transition-all duration-300 hover:scale-105 ${
                platform === '微博' ? 'bg-gradient-to-r from-red-500/90 to-pink-500/90 text-white border border-red-300/50' :
                platform === '知乎' ? 'bg-gradient-to-r from-blue-500/90 to-indigo-500/90 text-white border border-blue-300/50' :
                platform === '百度' ? 'bg-gradient-to-r from-green-500/90 to-emerald-500/90 text-white border border-green-300/50' :
                'bg-gradient-to-r from-gray-500/90 to-slate-500/90 text-white border border-gray-300/50'
              }`}>
                <span className="text-base mr-1">
                  {platform === '微博' && '🐦'}
                  {platform === '知乎' && '💡'}
                  {platform === '百度' && '🔍'}
                </span>
                {platform}
              </span>
              
              {/* 查看原文按钮 - 精简版 */}
              <button
                onClick={handleButtonJump}
                className={`group flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold transition-all duration-300 transform hover:scale-105 shadow-md overflow-hidden ${
                  url 
                    ? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:shadow-lg hover:shadow-blue-300/50' 
                    : 'bg-gradient-to-r from-gray-400 to-gray-500 text-gray-200 cursor-not-allowed'
                }`}
                disabled={!url}
              >
                <ExternalLink className="w-4 h-4 group-hover:rotate-12 transition-transform duration-300" />
                <span>{url ? '查看原文' : '无链接'}</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      {/* 卡片底部装饰线 */}
      <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-blue-500/50 to-transparent group-hover:via-purple-500/50 transition-all duration-500"></div>
    </div>
  );
});

export default HotspotCard;